<template>
	<div class="moheader">
		<div class="title">
			<div class="top"></div>
			<div class="right"></div>
			<div class="input">
				<input type="text" v-model.trim="searchKey" @keyup.enter="searchss" placeholder="请输入您想要的内容" />
				<span class="iconfont icon-fangdajing iconspan" @click="searchss()"></span>
				<div class="rsc">
					<span>热搜词：</span>
					<ul>
						<li @click="allSearches(item)" v-for="(item, index) in allSearch" :key="index">
							{{ item }}
						</li>
					</ul>
				</div>
			</div>
			<div class="footer">
				<ul>
					<li>
						<img src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/作者投稿.png" alt="" />
						<div>作者投稿</div>
					</li>
					<li>
						<img src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/作者查稿.png" alt="" />
						<div>作者查稿</div>
					</li>
					<li>
						<img src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/专家审稿.png" alt="" />
						<div>专家审稿</div>
					</li>
					<li>
						<img src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/编辑中心.png" alt="" />
						<div>编辑中心</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	//juqery
	// import searchFilter from "../../../assets/script/search-fliter";
	export default {
		data() {
			return {
				searchKey: "",
				allSearch: [],
			};
		},
		methods: {
			searchss() {
				this.$uniRouter.push({
					path: "/search",
					query: {
						whereName: this.searchKey,
					},
				});
			},
			allSearches(item) {
				this.$uniRouter.push({
					path: "/search",
					query: {
						whereName: item,
					},
				});
			},
			getSear() {
				// 获取搜索
				this.$httphelper.get("/api/Lm/GetSearchKeyWords")
					.then((res) => {
						this.allSearch = res.data.data;
					})
					.catch((e) => {
						console.log(e);
					});
			},
		},
		created() {
			this.getSear();
		},
	};
</script>

<style lang="less" scoped>
	.moheader {
		width: 100%;
		height: 522rpx;
		background: #003c80;

		.title {
			width: 100%;
			position: relative;
			.top {
				position: absolute;
				top: 60rpx;
				left: 32rpx;
				width: 600rpx;
				background: url("https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjih5/logo.png");
				background-size: 100%;
				background-repeat: no-repeat;
				height: 114rpx;
			}

			.right {
				position: absolute;
				background-image: url("https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjih5/水印.png");
				background-size: 100%;
				background-repeat: no-repeat;
				height: 220rpx;
				top: 140rpx;
				right: 130rpx;
				width: 220rpx;
			}

			.input {
				width: 92% !important;
				margin: 0 auto;
				padding-top: 220rpx;
				position: relative;
				input {
					height: 72rpx;
					outline: none;
					border: none;
					background: #ffffff;
					padding-left: 40rpx;
					padding-right: 100rpx;
					border-radius: 36rpx;
				}

				input::-webkit-input-placeholder {
					/* WebKit browsers */
					color: rgba(60, 60, 67, 0.13);
					font-size: 28rpx;
				}

				.iconspan {
					position: absolute;
					right: 36rpx;
					bottom: 86rpx;
				}

				.rsc {
					margin-top: 20rpx;
					padding-bottom: 15rpx;
					display: flex;
					// margin-left: 1.3125rem;
					span {
						color: rgba(255, 255, 255, 0.62);
						float: left;
						left: 0rpx;
						bottom: 0;
						width: 98rpx;
						font-size:24rpx;
						margin-left: 50rpx;
					}

					ul {
						display: flex;
						// margin-left: 2.5rem;
						li {
							cursor: pointer;
							list-style: none;
							margin-left: 20rpx;
							color: rgba(255, 255, 255, 0.62);
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.footer {
			width: 92%;
			margin: 0 auto;
			ul {
				padding: 0;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				li {
					list-style: none;
					font-size: 24rpx;

					img {
						margin-left: 30rpx;
						width: 50rpx;
						height:58rpx;
					}

					div {
						text-align: center;
						color: rgba(255, 255, 255, 0.62);
					}
				}
			}
		}
	}
</style>
